body {
    min-width: 320px;
    max-width: 750px;
    /*增加 限制设备最大宽度*/
    /* flexible 给我们划分了 10 等份 */
    width: 10rem;
    /*修改*/
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background: #fff;
    height: 3000px;
}

a {
    text-decoration: none;
}


/* 最大宽度 */

@media screen and (min-width: 750px) {
    html {
        font-size: 75px !important;
    }
}


/* 最小的宽度  如果当设备的宽度最小是320的时候 我们让html标签的 fontsize设置为32 */

@media screen and (max-width: 320px) {
    html {
        font-size: 32px !important;
    }
}

.search {
    position: fixed;
    top: 0rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    width: 10rem;
    background-color: #FF0000;
    height: 1.173rem;
}

.classify {
    background: url(../images/jd_icons.png) no-repeat;
    background-size: auto;
    margin-top: .32rem;
    margin-left: .373rem;
    height: .48rem;
    width: .533rem;
    background-size: 6.67rem auto;
}

.login {
    color: #fff;
    line-height: .267rem;
    font-size: .373rem;
    margin-right: .373rem;
    margin-top: .36rem;
    height: .36rem;
    width: .76rem;
}

.ipt {
    height: .8rem;
    padding-top: .19rem;
    flex: 1;
    width: 100%;
    background-color: #fff;
    border-radius: .8rem;
    margin-top: .14rem;
    margin: .14rem .4rem;
    font-size: .333rem;
    color: #ccc;
}

.ipt span:nth-child(1) {
    float: left;
    width: .533rem;
    height: .4rem;
    background: url(../images/jd_icons.png) no-repeat -1.32rem 0px;
    margin-left: .12rem;
    background-size: 6.67rem auto;
}

.ipt span:nth-child(3) {
    float: left;
    width: .373rem;
    height: .4rem;
    background: url(../images/jd_icons.png);
    background-position: -2.65rem 0;
    background-size: 6.67rem auto;
    vertical-align: top;
}

.ipt span:nth-child(2) {
    float: left;
    width: .027rem;
    height: .4rem;
    margin: 0px .107rem;
    background-color: #ccc;
}

.ipt input {
    float: left;
    height: .4rem;
    line-height: .533rem;
    margin-left: .107rem;
}


/* banner */

.banner {
    margin-top: 1.173rem;
    width: 100%;
    height: 3.707rem;
}

.banner img {
    width: 100%;
    height: 100%;
}


/* goods */

.goods {
    display: flex;
    width: 100%;
    height: 4.667rem;
    flex-wrap: wrap;
}

.goods a {
    text-align: center;
    flex: 20%;
}

.goods a p {
    margin-top: .2rem;
    height: .333rem;
    font-size: .333rem;
}

.goods a div {
    margin-top: .373rem;
    width: 1.067rem;
    height: 1.067rem;
    margin-left: .5rem;
}

.goods a div img {
    width: 100%;
    height: 100%;
}


/* nav */

nav {
    margin: .533rem 0rem;
    height: .533rem;
    line-height: .533rem;
}

nav span:nth-child(1) {
    font-size: .427rem;
    color: #3e3e3e;
}

nav span:nth-child(2) {
    margin: 0rem .267rem;
    font-size: .32rem;
    color: #ff655c;
}

nav span:nth-child(3) {
    font-size: .32rem;
    color: #3e3e3e;
}

nav span:nth-child(4) {
    float: right;
    font-size: .427rem;
    color: #3e3e3e;
}


/* pic */

.pic {
    height: 2.987rem;
    display: flex;
}

.pic a {
    flex: 25%;
}

.pic a:nth-child(1) {
    flex: 50%;
}

.pic a span {
    vertical-align: middle;
    display: inline-block;
    width: .027rem;
    height: 100%;
    background-color: #ccc;
    margin-left: .05rem;
}


/* footer */

footer {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: .133rem;
    position: fixed;
    bottom: 0rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    height: 1.333rem;
    width: 10rem;
}

footer a {
    line-height: 1.3rem;
    text-align: center;
    flex: 1;
}